<!DOCTYPE html>
<html>
<head>
    <title>Velocity vs. Time Graph</title>
    <style>
        canvas {
            border: 1px solid #d3d3d3;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="550" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // --- Configuration ---
        const xOrigin = 70;
        const yOrigin = 270;
        const xScale = 14; // pixels per second
        const yScale = 20; // pixels per m/s

        const xMax = 32;
        const yMax = 10;
        const yMin = -10;

        const tickMajor = 5;
        const tickMinor = 2;

        // --- Helper Functions ---
        function mapX(t) {
            return xOrigin + t * xScale;
        }

        function mapY(v) {
            return yOrigin - v * yScale;
        }

        // --- Drawing Functions ---

        function drawAxes() {
            ctx.beginPath();
            ctx.strokeStyle = 'black';
            ctx.lineWidth = 1.5;

            // Y-axis
            ctx.moveTo(mapX(0), mapY(yMin - 0.5));
            ctx.lineTo(mapX(0), mapY(yMax + 0.5));

            // X-axis
            ctx.moveTo(mapX(0), mapY(0));
            ctx.lineTo(mapX(30.5), mapY(0));

            ctx.stroke();
        }

        function drawTicksAndLabels() {
            ctx.font = '14px Arial';
            ctx.fillStyle = 'black';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';

            // X-axis ticks and labels
            for (let t = 0; t <= 30; t++) {
                if (t % 5 === 0) {
                    ctx.beginPath();
                    ctx.moveTo(mapX(t), mapY(0) - tickMajor);
                    ctx.lineTo(mapX(t), mapY(0) + tickMajor);
                    ctx.stroke();
                    if (t > 0) {
                         ctx.fillText(t, mapX(t), mapY(0) + 20);
                    }
                } else {
                    ctx.beginPath();
                    ctx.moveTo(mapX(t), mapY(0) - tickMinor);
                    ctx.lineTo(mapX(t), mapY(0) + tickMinor);
                    ctx.stroke();
                }
            }

            // Y-axis ticks and labels
            ctx.textAlign = 'right';
            for (let v = yMin; v <= yMax; v++) {
                 if (v % 2 === 0) {
                    ctx.beginPath();
                    ctx.moveTo(mapX(0) - tickMajor, mapY(v));
                    ctx.lineTo(mapX(0) + tickMajor, mapY(v));
                    ctx.stroke();
                    ctx.fillText(v, mapX(0) - 10, mapY(v));
                } else {
                    ctx.beginPath();
                    ctx.moveTo(mapX(0) - tickMinor, mapY(v));
                    ctx.lineTo(mapX(0) + tickMinor, mapY(v));
                    ctx.stroke();
                }
            }
            
            // Axis labels
            ctx.save();
            ctx.textAlign = 'center';
            // X-axis label
            ctx.fillText('Time (s)', mapX(15), mapY(0) + 40);

            // Y-axis label
            ctx.translate(xOrigin - 50, yOrigin);
            ctx.rotate(-Math.PI / 2);
            ctx.fillText('Velocity (m/s)', 0, 0);
            ctx.restore();
        }

        function drawGraph() {
            ctx.beginPath();
            ctx.strokeStyle = 'black';
            ctx.lineWidth = 2;
            ctx.setLineDash([6, 4]);

            // From (t=0, v=8) to (t=12, v=8)
            ctx.moveTo(mapX(0), mapY(8));
            ctx.lineTo(mapX(12), mapY(8));

            // From (t=12, v=8) to (t=12, v=-6)
            ctx.lineTo(mapX(12), mapY(-6));

            // From (t=12, v=-6) to (t=28, v=-6)
            ctx.lineTo(mapX(28), mapY(-6));

            ctx.stroke();
        }

        // --- Main Drawing ---
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawAxes();
        drawTicksAndLabels();
        drawGraph();

    </script>
</body>
</html>